import React, {useEffect, useState} from "react";
import {Button, Form, Input, Modal, Select} from "antd";
import PojApi from "@/api/PojApi.ts";
import {PojInfoVo} from "@/api/Types/ObjInterfaces.ts";

interface Props {
    open: boolean
    setOpen: (open: boolean) => void
}

/**
 * 创建用户对话框
 * @param open 显示
 * @param setOpen 设置显示状态
 * @constructor
 */
const SavePojModal: React.FC<Props> = ({open, setOpen}) => {
    const [pojTypes, setPojTypes] = useState<string[]>([])

    useEffect(() => {
        PojApi.getPojTypes().then((data) => {
            setPojTypes(data)
        })
    }, []);

    const cancel = () => {
        setOpen(false)
    }

    const ok = (values: PojInfoVo) => {
        // 数据在 form 表单中配置
        PojApi.savePojInfo({
            ...values
        }).then(data => {
            cancel()
        })
    }

    return (
        <Modal
            open={open}
            onCancel={cancel}
            title="创建新项目"
            closeIcon={null}
            footer={null}
        >
            <Form
                name="basic"
                labelCol={{span: 8}}
                wrapperCol={{span: 16}}
                initialValues={{remember: true}}
                autoComplete="off"
                onFinish={(values) => {
                    ok(values)
                }}
            >
                <Form.Item
                    label="项目类型"
                    name="pojType"
                >
                    <Select
                        options={pojTypes.map(item => ({
                            title: item,
                            value: item
                        }))}
                    />
                </Form.Item>
                <Form.Item
                    label="项目名称"
                    name="name"
                >
                    <Input/>
                </Form.Item>
                <Form.Item
                    label="项目内容/简介"
                    name="description"
                >
                    <Input/>
                </Form.Item>
                <Form.Item wrapperCol={{offset: 8}}>
                    <Button htmlType="submit">完成</Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default SavePojModal;